<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="top">
				<view class="item">
					<view class="left">收货人</view>
					<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" name="username"
						v-model="username" />
				</view>
				<view class="item">
					<view class="left">手机号码</view>
					<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" name="userphone"
						v-model="userphone" />
				</view>

				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="location"
						v-model="location" />
				</view>

				<view class="item address">
					<view class="left">详细地址</view>
					<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" name="useraddress"
						v-model="useraddress" />
				</view>
				<!-- <view class="site-clipboard">
					<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
					<view class="clipboard">
						地址粘贴板
						<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
					</view>
				</view> -->
			</view>
			<view class="bottom">
				<view class="tag">
					<view class="left">标签</view>
					<view class="right">
						<u-radio-group v-model="label" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.name">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="default">
					<view class="left">
						<view class="set">设置默认地址</view>
						<view class="tips">提醒：每次下单会默认推荐该地址</view>
					</view>
					<view class="right">
						<switch color="red" @change="setDefault" name="status" :checked="status" />
					</view>
				</view>
			</view>
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
				@confirm="onConfirm($event,'region')" ref="region"></regionPicker>
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	// 引入提示模块 
	let {
		load,
		hideload,
		isLogin,
		tip
	} = require('@/utils/tip.js');
	let app = getApp();
	import regionPicker from "@/components/region/w-picker.vue";

	export default {
		components: {
			regionPicker
		},

		data() {
			return {
				regionVisible: false, //初始化地区选择器开关	
				username: '', //初始化收件人姓名
				userphone: '', //初始化收件人手机号
				useraddress: '', //初始化收件人详情地址
				location: '山东省滨州市无棣县', //初始化地区默认值
				label: '家', //初始化地址标签
				list: [{
						name: '家'
					},
					{
						name: '公司'
					},
					{
						name: '学校'
					}
				],
				status: false,
				siteUrl: 'addressadd', //初始化请求url地址
				id: '', //初始化修改数据id
			};
		},
		async onLoad(option) {
			console.log(option);
			// 有id 是修改地址
			if (option) {
				let {
					id
				} = option
				this.id = id;
				// 如果有id标识修改地址
				if (id) {
					// 更改标题
					uni.setNavigationBarTitle({
						title: '修改地址'
					})
					let {
						uid,
						token
					} = uni.getStorageSync('userInfo');
					// 根据地址id获取地址
					let result = await this.$http({
						url: '/addresslist',
						data: {
							uid,
							id: this.id
						},
						header: {
							authorization: token
						}
					})
					// console.log(result.data.list);
					let {
						label,
						location,
						regioncode,
						status,
						useraddress,
						username,
						userphone
					} = result.data.list[0]
					this.username = username;
					this.userphone = userphone;
					this.location = location;
					this.useraddress = useraddress;
					this.status = status == 0 ? false : true;
					this.label = label;

				} else {
					// 更改标题
					uni.setNavigationBarTitle({
						title: '新增地址'
					})
				}
			}

		},
		methods: {
			// 设置会员地区
			onConfirm(res) {
				this.location = res.result;
			},

			// 设置默认地址
			setDefault() {},

			// 设置底子标签
			radioGroupChange() {},

			async submit(e) {
				let {
					uid,
					token
				} = uni.getStorageSync('userInfo');
				let {
					username,
					location,
					status,
					useraddress,
					userphone
				} = e.detail.value
				if (this.id) {
					// 修改地址
					console.log(this.username);
					let res = await this.$http({
						url: '/addressedit',
						method: 'post',
						data: {
							id: this.id,
							username: this.username,
							userphone: this.userphone,
							location: this.location,
							useraddress: this.useraddress,
							status: this.status ? 1 : 0,
							label: this.label
						},
						header: {
							authorization: token
						}
					})
					console.log(res);
					// 修改成功
					if (res.data.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						// if(res.data.list.)
						// this.stauts = true
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/address/address'
							})
						}, 1000)
					} else if (result.data.code == 403) {
						// 登录过期
						uni.showToast({
							title: '登录过期',
							icon: 'error'
						})
					} else {
						// 添加失败
						uni.showToast({
							title: result.data.msg,
							icon: 'error'
						})
					}

				} else {
					// 新增地址
					let result = await this.$http({
						url: '/addressadd',
						data: {
							uid,
							username: this.username,
							userphone: this.userphone,
							location: this.location,
							useraddress: this.useraddress,
							status: this.status ? 1 : 0,
							label: this.label
						},
						method: 'post',
						header: {
							authorization: token
						}
					})
					// 添加成功
					if (result.data.code == 200) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
						// this.stauts = true
						// 跳转地址列表 
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/address/address'
							})
						}, 1000)
					} else if (result.data.code == 403) {
						// 登录过期
						uni.showToast({
							title: '登录过期',
							icon: 'error'
						})
					} else {
						// 添加失败
						uni.showToast({
							title: result.data.msg,
							icon: 'error'
						})
					}
				}




			}


		}
	};
</script>

<style lang="scss" scoped>
	// 引入样式
	// @import '@/static/css/addsite.scss';
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.wrap {
		background-color: #f2f2f2;

		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;

			.tag {
				display: flex;

				.left {
					width: 160rpx;
				}

				.right {
					display: flex;
					flex-wrap: wrap;

					.tags {
						width: 140rpx;
						padding: 16rpx 8rpx;
						border: solid 2rpx $u-border-color;
						text-align: center;
						border-radius: 50rpx;
						margin: 0 10rpx 20rpx;
						display: flex;
						font-size: 28rpx;
						align-items: center;
						justify-content: center;
						color: $u-content-color;
						line-height: 1;
					}

					.plus {
						//padding: 10rpx 0;
					}
				}
			}

			.default {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {}
			}
		}
	}
</style>